<template>
    <div class="content">
        <el-table :data="tableData" style="width: 100%;height: 200px !important;" highlight-current-row @cell-click="onCell">
            <el-table-column label="证书名称" show-overflow-tooltip>
                <template #default="scope">
                    <el-text v-if="scope.row.id == form.id"><el-icon color="#3d6abf" ><Check /></el-icon> {{scope.row.title}}</el-text>
                    <el-text v-else>{{scope.row.title}}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="level" label="资格等级" show-overflow-tooltip />
            <el-table-column prop="major" label="专业" show-overflow-tooltip />
            <el-table-column prop="acquired_at" label="资格取得时间" show-overflow-tooltip />
            <el-table-column prop="numbers" label="资格证书编号" show-overflow-tooltip />
            <el-table-column prop="approving_unit" label="批准单位" show-overflow-tooltip />
            <el-table-column prop="jury_name" label="评委会名称" show-overflow-tooltip />
        </el-table>
        <div class="text-center">
            <el-button size="small" type="primary" :icon="CirclePlus" @click="onSave">确定</el-button>
        </div>
    </div>

</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { CirclePlus,Check } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import http from '../util/request';

const form = ref<any>({id:0})
interface Role {
    id: number
    name: string
}

interface User {
    id: number
    name: string
    roles:Role[]
}
const tableData = ref<User[]>([])

const user_id = ref<number>(0)
const role_id = ref<number>(0)

const onGetData = () => {
    
    form.value.loading = true
    
    http.post('/user/certs',{id:user_id.value}).then((response:any)=>{
        form.value.loading = false
        tableData.value = response.data.data
    })
}

const onCell = (row:any) => {
    form.value.id = row.id
}

const props = defineProps<{
    data:any
    role_id:number
}>()

watch(props,()=>{
    user_id.value = props.data
    role_id.value = props.role_id
    onGetData()
},{ immediate: true })


const onSave = () => {
    if(!form.value.id){
        ElMessage.error('请选择证书');
        return
    }
    http.patch('/user/userBindProject/cert',{user_id:user_id.value,role_id:role_id.value,cert_id:form.value.id}).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);return;
        }
        ElMessage.success(response.data.msg);
        onCertSave();
    })
}

const onCertSave = () => {
    emit('onCertSave')
}

const emit = defineEmits(['onCertSave'])

</script>

<style scoped>
.el-table .el-table__row .current-row {
    background-color: #65b5da !important; /* 浅蓝色背景 */
}
</style>